<div class="mt-12 max-w-lg mx-auto">
    <.form let={f} for={@changeset} action={Routes.organization_path(@conn, :update, @organization)}>
        <%= if @changeset.action do %><div class="alert alert-danger">Oops, something went wrong! Please check the errors below.</div><% end %>
        <h3 class="text-xl leading-6 font-medium text-gray-900">Organization settings</h3>
        <p class="mt-1 text-sm text-gray-500">This information will be displayed to all members.</p>

        <div class="mt-6 grid grid-cols-1 gap-y-6 sm:grid-cols-6">
            <div class="sm:col-span-6">
                <%= label f, :name, "Organization name", class: "block text-sm font-medium text-gray-700" %>
                <div class="mt-1">
                    <%= text_input f, :name, required: true, class: "block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" %>
                    <%= error_tag f, :name %>
                </div>
            </div>
            <div class="sm:col-span-6">
                <%= label f, :description, class: "block text-sm font-medium text-gray-700" %>
                <div class="mt-1">
                    <%= textarea f, :description, class: "block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" %>
                    <%= error_tag f, :description %>
                </div>
                <p class="mt-1 text-sm text-gray-500">Describe your organization in a few sentences.</p>
            </div>
            <% feature = Azimutt.features().gateway_custom %>
            <%= if feature[@plan.id] do %>
            <div class="sm:col-span-6">
                <%= label f, :gateway, "Custom gateway", class: "block text-sm font-medium text-gray-700" %>
                <div class="mt-1">
                    <%= text_input f, :gateway, placeholder: "ex: https://gateway.azimutt.app", class: "block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" %>
                    <%= error_tag f, :gateway %>
                </div>
                <p class="mt-1 text-sm text-gray-500">
                    If local gateway (<a href="http://localhost:4177" target="_blank" class="underline">localhost:4177</a>) is not up (<span class="font-mono">npx azimutt@latest gateway</span>),
                    Azimutt will reach out to <a href="https://gateway.azimutt.app" target="_blank" class="underline">gateway.azimutt.app</a> or this one if specified.
                </p>
            </div>
            <% else %>
            <div class="sm:col-span-6 -m-3 p-3 bg-gray-50 shadow rounded">
                <div class="flex justify-between">
                    <label for="gateway" class="block text-sm font-medium text-gray-700"><%= feature.name %></label>
                    <span class="text-sm text-gray-500">Needs <%= AzimuttWeb.LayoutView.plan_badge_for(feature) %></span>
                </div>
                <div class="mt-1">
                    <input type="text" name="gateway" id="gateway" disabled placeholder="ex: https://gateway.azimutt.app" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm text-sm leading-6 ring-1 ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200">
                </div>
                <p class="mt-1 text-sm text-gray-500">
                    If local gateway (<a href="http://localhost:4177" target="_blank" class="underline">localhost:4177</a>) is not up (<span class="font-mono">npx azimutt@latest gateway</span>),
                    Azimutt will reach out to <a href="https://gateway.azimutt.app" target="_blank" class="underline">gateway.azimutt.app</a> or this one if specified.
                </p>
            </div>
            <% end %>
            <div class="mt-3">
                <%= submit "Save", class: "inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" %>
            </div>
        </div>
    </.form>
</div>
